<template>
  <div class="all">
    <!-- 头部 -->
    <div class="mine-head">
      <div class="mine-head-bg">
        <div class="mine-head-con">
          <div>
            <img src="../../assets/images_test/0.png" alt />
          </div>
          <van-cell :border="false">
            <div slot="title">
              <span class="name-title">一念天堂</span>
              <van-tag color="#FF2A2AFF">运营商</van-tag>
            </div>
            <p slot="label" style="color: aliceblue;">137******185</p>
          </van-cell>
          <van-icon name="setting-o" color="#fff" @click="$router.push({path:'userSettings'})" />
        </div>
      </div>
      <div class="user-behavior">
        <div>
          <p>1156</p>
          <p>被浏览</p>
        </div>
        <div>
          <p>50</p>
          <p>关注</p>
        </div>
        <div>
          <p>150</p>
          <p>被收藏</p>
        </div>
        <div>
          <p>150</p>
          <p>被分享</p>
        </div>
      </div>
    </div>
    <!-- 主体 -->
    <div class="mine-con">
      <div class="my-history">
        <h3>我的历史</h3>
        <div class="history-det">
          <div class="det" v-for="(item,i) in historyList" :key="i">
            <img :src="item.icon_url" alt />
            <p>{{item.name}}</p>
            <p>{{item.num}}</p>
          </div>
        </div>
      </div>
      <div class="manage">
        <div @click="$router.push({path:'issue'})">
          <img src="../../assets/img/mine/index/fabu.png" alt />
          <span>发布管理</span>
        </div>
        <div @click="enterPop">
          <img src="../../assets/img/mine/index/ruzhu.png" alt />
          <span>入驻管理</span>
        </div>
        <div>
          <img src="../../assets/img/mine/index/quanzi.png" alt />
          <span>我的圈子</span>
        </div>
      </div>
      <div class="feature-list">
        <van-cell title="系统通知" is-link to="systemMessages">
          <div slot="icon">
            <van-icon name="chat-o" color="#FF3641FF" class="left-icon" :border="false" />
          </div>
        </van-cell>
        <van-cell title="常见问题" is-link to="faq">
          <div slot="icon">
            <van-icon name="question-o" color="#FF3641FF" class="left-icon" :border="false" />
          </div>
        </van-cell>
        <van-cell title="关于我们" is-link to="aboutUs">
          <div slot="icon">
            <van-icon name="info-o" color="#FF3641FF" class="left-icon" :border="false" />
          </div>
        </van-cell>
        <van-cell title="意见反馈" is-link to="feedback">
          <div slot="icon">
            <van-icon name="records" color="#FF3641FF" class="left-icon" :border="false" />
          </div>
        </van-cell>
        <van-cell title="账号安全" is-link to="safety">
          <div slot="icon">
            <van-icon name="paid" color="#FF3641FF" class="left-icon" :border="false" />
          </div>
        </van-cell>
        <van-cell title="清空入驻信息" is-link @click="emptyEnter">
          <div slot="icon">
            <van-icon name="brush-o" color="#FF3641FF" class="left-icon" :border="false" />
          </div>
        </van-cell>
      </div>
    </div>
    <!-- 风险提示弹出框 -->
    <van-dialog v-model="riskShow" :show-confirm-button="false" class="risk-dialog">
      <h2>风险提示</h2>
      <div class="dialog-con">
        <van-icon name="warning" color="#FF3A3AFF" />
        <p>清空入驻信息后,将恢复普通会员身份!请谨慎操作!</p>
      </div>
      <div class="next-button">
        <van-button color="#C8C8C8FF" round @click="riskShow=false">取消</van-button>
        <van-button v-if="disabled" color="#64D857FF" :disabled="disabled" round>我知道了({{s}})</van-button>
        <van-button v-else color="#64D857FF" :disabled="disabled" round @click="riskShow=false">确认</van-button>
      </div>
    </van-dialog>
    <!-- 入驻管理弹出框 -->
    <van-dialog v-model="enterShow" :show-confirm-button="false" class="risk-dialog">
      <h2>风险提示</h2>
      <div class="dialog-con">
        <van-icon name="warning" color="#FF3A3AFF" />
        <p>目前系统仅支持市场运营商(市场管理方)和市场商家(档口)入驻,非上述主体无相关服务,各主体提交资料需系统管理员和市场运营方审核方可发布,请谨慎操作,不当操作可能发生法律后果.</p>
      </div>
      <div class="next-button">
        <van-button color="#C8C8C8FF" round @click="enterShow=false">取消</van-button>
        <van-button v-if="disabled" color="#64D857FF" :disabled="disabled" round>我知道了({{s}})</van-button>
        <van-button v-else color="#64D857FF" :disabled="disabled" round>确认</van-button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      historyList: [
        {
          icon_url: require("../../assets/img/mine/index/liulan.png"),
          name: "浏览",
          num: "1182"
        },
        {
          icon_url: require("../../assets/img/mine/index/guanzhu.png"),
          name: "关注",
          num: "50"
        },
        {
          icon_url: require("../../assets/img/mine/index/shoucang.png"),
          name: "收藏",
          num: "3002"
        },
        {
          icon_url: require("../../assets/img/mine/index/fenxiang.png"),
          name: "分享",
          num: "1182"
        }
      ],

      // 风险提示弹出框
      riskShow: false,
      // 秒表初始时间
      s: 0,
      // 计时按钮默认禁止
      disabled: true,
      // 入住管理弹出框
      enterShow: false,
      // 倒计时定时器
      timeID: ""
    };
  },
  methods: {
    enterPop() {
      this.enterShow = true;
      this.count(5);
    },
    emptyEnter() {
      this.riskShow = true;
      this.count(5);
    },
    count(num) {
      clearInterval(this.timeID);
      this.disabled = true;
      this.s = num;
      this.timeID = setInterval(() => {
        this.s--;
        if (this.s == 0) {
          this.disabled = false;
        }
      }, 1000);
    }
  }
};
</script>

<style lang = 'less' scoped>
/* 卡片边框 */
@radius : 5px;
/* 卡片阴影 */
@card-shadow: 0 0 2px #999;
.all {
  margin-bottom: 56px;
  background-color: #eef0edff;
}
.mine-head {
  position: relative;
  width: 100%;
  height: 200px;
  .mine-head-bg {
    width: 100%;
    height: 180px;
    background: url("../../assets/img/mine/index/heade-bg.png");
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px 16px 16px;
    .mine-head-con {
      display: flex;
      width: 100%;
      height: 70px;
      /* background-color: blueviolet; */
      img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
      }
      .van-cell {
        background-color: transparent;
        .name-title {
          color: aliceblue;
          font-size: 25px;
          margin-right: 10px;
        }
      }
      /deep/.van-icon-setting-o:before {
        font-size: 18px;
      }
    }
  }
  .user-behavior {
    position: absolute;
    background-color: #fff;
    width: 345px;
    height: 84px;
    top: 116px;
    left: 15px;
    border-radius: @radius;
    box-shadow: @card-shadow;
    display: flex;
    justify-content: space-around;
    align-items: center;
    p {
      text-align: center;
      font-weight: 600;
      &:nth-child(1) {
        font-size: 20px;
        color: #000000ff;
      }
      &:nth-child(2) {
        font-size: 14px;
        color: #787878ff;
      }
    }
  }
}
.mine-con {
  padding: 15px;
  .my-history {
    margin-bottom: 15px;
    width: 100%;
    height: 125px;
    border-radius: @radius;
    background-color: #ffffff;
    background: #ffffff url("../../assets/img/mine/index/percent.png") no-repeat
      230px 20px;
    background-size: 100px;
    box-shadow: @card-shadow;
    padding: 12px 6px;
    box-sizing: border-box;
    h3 {
      font-size: 15px;
      font-weight: 700;
    }
    .history-det {
      width: 100%;
      height: 90px;
      display: flex;
      justify-content: space-around;
      .det {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        img {
          width: 40px;
          /* height: 23px; */
        }
        p {
          font-weight: 500;
          &:nth-child(2) {
            font-size: 12px;
            color: #787878ff;
          }
          &:nth-child(3) {
            font-size: 18px;
            color: #000000ff;
          }
        }
      }
    }
  }
  .manage {
    background-color: #fff;
    width: 100%;
    height: 108px;
    box-shadow: @card-shadow;
    border-radius: @radius;

    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 47px;
        margin-bottom: 10px;
      }
      span {
        font-size: 14px;
      }
    }
  }
  .feature-list {
    background-color: #ffffff;
    border-radius: @radius;
    box-shadow: @card-shadow;
    z-index: 999;
    .van-cell--clickable {
      display: flex;
      align-items: center;
      border-radius: 10px;
      z-index: 5;
    }
    .left-icon {
      font-size: 15px;
      margin-right: 5px;
      margin-top: 8px;
    }
  }
}
/* 弹窗样式 */
.risk-dialog {
  padding: 15px 25px;
  box-sizing: border-box;

  .dialog-con {
    width: 100%;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .van-icon {
      font-size: 52px;
      margin-top: 15px;
    }
    p {
      color: #787878ff;
      font-size: 13px;
      line-height: 20px;
      text-align: left;
      margin-bottom: 55px;
    }
  }
  .next-button {
    display: flex;
    justify-content: space-between;
    .van-button {
      height: 35px;
      line-height: 35px;
      text-align: center;
      width: 115px;
    }
  }
}
</style>